<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name = "private_home" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>

    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script type="text/javascript" th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
    <link rel="axios" th:href="@{/assets/js/axios.min.js}">

</head>
<body>

    <!--引入公共页面部分-->
    <div class="header section" th:replace="~{common/head::head}"></div>
    <!--用户身份信息-->
    <div class="row">
        <div class="col-1"></div>
            <div class="col-7">
                <div style="height: 120px">
                    <div  style="margin-left: 10px ;width: 160px;height: 100px ;float: left">
                        <img th:src="|http://localhost:8080/uploadFile/user/${userInfo.avatar}|" style="width: 100px ; height: 100px ; border-radius: 50px">
                    </div>
                    <div  style="margin-left: 10px">
                        <h3 th:text="${userInfo.userName}" ></h3>
                        <span th:if="${userInfo.getIsmember() == 1}?'vip':''"></span>
                        <h6 th:text="${userInfo.userSign}"></h6>
                    </div>

                </div>
                <hr />

                <!--用户动态信息-->
                <div th:each="d:${userInfo.userDynamicList}" style="margin-top: 10px;border-color: grey;border-width: 1px"  th:id="${d.dynamicId}" th:onclick="stripToDynamic(id)">
                    <div class="comment" >
                        <li th:text="${#dates.format(d.createTime,'yyyy年MM月dd日hh:mm:ss')}"></li>
                        <p th:text="${d.contentText}" style="height: 30%;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical"></p>
                        <hr />
                    </div>
                </div>
            </div>
        <div class="col-3">
            <div style="height: 250px">
                <div>
                    <h2>他关注的人</h2>
                </div>
                <div>
                    <div th:each="u:${userInfo.attentionUserList}" style="width: 80px;height: 80px;float: left" th:id = "${u.userId}" th:onclick="switchOutAttentionUser(id)">
                        <div><img th:src="|http://localhost:8080/uploadFile/user/${u.avatar}|" style="width: 40px;height: 40px;border-radius: 20px"></div>
                        <div><span th:text="${u.userName}"></span></div>
                    </div>
                </div>
            </div>
            <hr />
            <div style="margin-top: 20px">
                <div><h2>他收藏的文章</h2></div>
                <div th:each="a:${userInfo.collectList}" th:id="${a.articleId}" th:onclick="stripToArticle(id)">
                    <div  >
                        <p th:text="${a.articleTitle}"></p>
                        <hr />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-1"></div>
    </div>


</body>
<script th:inline="javascript">
    function switchOutAttentionUser(id) {
        console.log(id);
        location.href = "http://localhost:9001/dynamic/findDynamicUser?userId="+id ;}
    function stripToDynamic(id) {
        location.href = "/dynamic/queryDynamic?DynamicId="+id
        }
    function stripToArticle(id) {
        location.href = "/article/artcleDetails?articleId="+id+"&userId="+[[${session.user.userId}]]
    }
</script>
</html>